<html>
<head>
<title>myNerdbot</title>
<link rel="stylesheet" type="text/css" href="/site_media/general.css" />
<script type="text/javascript" src="/site_media/jquery.js"></script>
<script type="text/javascript" src="/site_media/form.js"></script>
<script>

var i = 0;


$(document).ready(function(){

var selected = $(".card_title1");
var inHand = new String();
var focus = new Array();
focus[0] = '#search_box';
focus[1] = '#tagbox';
focus[2] = '#cards';
focus[3] = '#selected';



//Click on a tag to remove results containing that tag
//$(".filtertag").click(function (){
//	var nam = $(this).attr("name"); 
	//alert("the" +nam);
//	$("#search_results").load("/cards/ajax",{pk: 25, query:'calculus', restrict: nam});
//});


//Flipping panes code
$("#toggle1").hide();
$("#side-r").hide();
$
("html").keypress(function(e){

if (e.which == 65 && e.ctrlKey && e.shiftKey){
	$("#tatata").text(e.which);
	$("#side-l").hide();
	$("#side-c").hide();
	$("#side-r").show();
	$("#toggle1").show();	
	$("#toggle").hide();
}

if (e.which == 83 && e.ctrlKey && e.shiftKey){
	$("#side-l").show();
	$("#side-c").show();
	$("#side-r").hide();
	$("#toggle").show();	
	$("#toggle1").hide();
}

if (e.which == 81 && e.ctrlKey && e.shiftKey){ //q
	$(focus[i]).css({'border':'0px'});
	i = (i+1)%4;
	//$("#placetags").css({'border':'green solid 3px'});
	$(focus[i]).css({'border':'green solid 3px'});
//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});

}

if (e.which == 90 && e.ctrlKey && e.shiftKey){ //z
	$(focus[i]).css({'border':'0px'});
	i = 0;
	//$("#placetags").css({'border':'green solid 3px'});
	$(focus[i]).css({'border':'green solid 3px'});
	document.search_box_name.query.focus();
//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});

}

if (e.which == 88 && e.ctrlKey && e.shiftKey){ //x
	$(focus[i]).css({'border':'0px'});
	i = 1;
	//$("#placetags").css({'border':'green solid 3px'});
	$(focus[i]).css({'border':'green solid 3px'});
//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});

}

if (e.which == 67 && e.ctrlKey && e.shiftKey){ //c
	$(focus[i]).css({'border':'0px'});
	i = 2;
	//$("#placetags").css({'border':'green solid 3px'});
	$(focus[i]).css({'border':'green solid 3px'});
//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});

}

if (e.which == 86 && e.ctrlKey && e.shiftKey){ //v
	$(focus[i]).css({'border':'0px'});
	i = 3;
	//$("#placetags").css({'border':'green solid 3px'});
	$(focus[i]).css({'border':'green solid 3px'});
//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});

}


if ((e.which == 49 || e.which == 50 || e.which == 51 || e.which == 52 || e.which == 53) && focus[i] =='#cards') {

	if (e.which == 49){ //1
		var mattvar = $(".card_num_1").children(".highlight"); 
	}
	if (e.which == 50){ //2
		var mattvar = $(".card_num_2").children(".highlight"); 
	}
	if (e.which == 51){ //3
		var mattvar = $(".card_num_3").children(".highlight"); 
	}
	if (e.which == 52){ //4
		var mattvar = $(".card_num_4").children(".highlight"); 
	}
	if (e.which == 53){ //5
		var mattvar = $(".card_num_5").children(".highlight"); 
	}

	
	mattvar.clone().appendTo("#reading_pane_main");
	mattvar.clone().appendTo("#selected");
	$("#selected > .highlight").css("max-width", "90%");
	$("#selected > .highlight > .card_tags").hide();
	$("#selected > .highlight > .expand_card").hide();
	$("#selected > .highlight > .card_details").hide();
	mattvar.css({'background-color':'gray'});

}
});

$("#toggle").click(function(){
	$("#side-l").hide();
	$("#side-c").hide();
	$("#side-r").show();
	$("#toggle1").show();	
	$("#toggle").hide();
});

$("#toggle1").click(function(){
	$("#side-l").show();
	$("#side-c").show();
	$("#side-r").hide();
	$("#toggle").show();	
	$("#toggle1").hide();

});

$(function() {
var options = { 
    type: 'POST',
    target:     '#search_results', 
    url:        '{{urls}}/ajax', 
    success:    function() {
	$(".card_details").hide(); 
        $(".expand_card").click(function () {
		$(this).next(".card_details").toggle();
	});
    } 
}; 
	$('#ajaxform').ajaxForm(options);
});

</script>
</head>

<body>
<div id='wrapper'>

<div id ='header'>
<h1 id="title"><span>myNerdbot:</span><span style="font-size:15px"><i> a project of the Ritter Graduation Program</i></span> <b>ALPHA 3</b></h1>
<img height=50px src="/site_media/img/robot_logo.png" alt="Robot_logo" id="main_logo">
<span class="toggle" id='toggle'>SHOW READING (Ctrl+Shift+A)</span> <span id='toggle1' class="toggle">SHOW SEARCH (Ctrl+Shift+S)</span>

<A HREF="" style="color: white" onClick="popup = window.open('{{urls}}/', 'PopupPage', 'height=770,width=700,scrollbars=yes,resizable=no,personalbar=no,statusbar=no,toolbar=no'); return false" target="_blank"><b>Pop-out</b></a>

<p id="displaystuff"></p>
</div>

<div id='side-l'>
<h2 class="pane_heading">Search</h2>
<div id="search_box"> <!-- NEW ADDITION! -->
<form action="" id="ajaxform" action="{{urls}}/ajax">
<form action="" id="ajaxform" name='search_box_name' action="/cards/ajax">
<label>Search Terms</label>
<label>Search tags</label>
<input type="text" name='query' />
<input type="submit" value="Search" />
<br>
<input type="checkbox" name="search_type" value="matt"> Search by Known Variables<br>
</form>
</div

<!--THIS IS WHERE the cards.html file is inserted -->
<div id='search_results'>
<script language="JavaScript"><!-- //For lolcats
index = Math.floor(Math.random() * 4);
document.write('<center><img width=350px src="/site_media/img/lolcats/' + index +'.png" alt="lolcats go here" class="lolcat_image"></center>');
</script>
</div>
<!--END OF WHERE the cards.html file is inserted -->

</div>

<div id='side-c'>
<h2 class="pane_heading">My hand</h2>

<div id="selected"></div>
</div>

<div id='side-r'>
<h2 class="pane_heading">Reading Pane</h2>

<div id="reading_pane_main"></div>

</div>


<div id="footer">
<a href="{{urls}}/help/misc" target="_blank">Help</a> <a href="{{urls}}/about/misc" target="_blank">About</a> <a href="{{urls}}/privacy/misc" target="_blank">Privacy</a>
<span class="minor_text">Note that this site will probably only function using </span> <a href="http://www.mozilla.com/en-US/firefox/" ><img height=50px src="/site_media/img/firefox.png" alt="firefox_logo" id="firefox_logo"></a>
</div>

</div>
</body>

</html>
